<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'

import { ref } from 'vue';

//当前用户信息
import useUserInfoStore from '@/stores/userInfo';
const userInfo = useUserInfoStore().info;


//发布公告
//弹窗
const newTitle = ref('公告详情')
const dialogVisible = ref(false)
const newsModel = ref({
    newsName: '',
    username: userInfo.username,
    content: ''
})

import { newsAddService, newsListService, newsDelService } from '@/api/news';
import { ElMessage, ElMessageBox } from 'element-plus';
const addNews = async () => {
    console.log(newsModel.value)
    if (newsModel.value.newsName == '' || newsModel.value.content == '') {
        ElMessage.error('公告信息不能为空')
        return;
    }
    let result = await newsAddService(newsModel.value);
    ElMessage.success(result.msg ? result.msg : '发布公告成功');
    clearNews();
    newsList();
    dialogVisible.value = false
}
//清空公告
const clearNews = () => {
    newsModel.value.newsName = '',
    newsModel.value.content = ''
}

//公告列表
const searchNews = ref('')
//重置按钮
const clearBtn = () => {
    searchNews.value = ''
}
const newsListModel = ref();
const newsList = async () => {
    let result = await newsListService(searchNews.value);
    newsListModel.value = result.data;
}
newsList();

//删除公告
const newsDelete = (deleteId) =>{
    //提示，用户
    ElMessageBox.confirm(
        '是否确定删除该公告',
        '温馨提示',
        {
            confirmButtonText: '确认删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            //调用接口
            // console.log(deleteId)
            let result = await newsDelService(deleteId);
            ElMessage({
                type: 'success',
                message: '成功删除',
            })
            //更新
            newsList();
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}

</script>

<template>
    <div>
        <!-- 搜索表单 -->
        <el-form inline>
            <el-form-item label="公告名:">
                <el-input v-model="searchNews" style="width: 200px" @input="newsList"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="newsList">搜索</el-button>
                <el-button @click="clearBtn">重置</el-button>
            </el-form-item>
            <el-form-item style="float: right">
                <el-button type="primary" @click="dialogVisible = true, newTitle = '发布公告'"
                    v-show="userInfo.isAdmin === 1">发布公告</el-button>
            </el-form-item>
        </el-form>

        <el-row v-for="(item, index) in newsListModel" :key="index">
            <el-col>
                <el-card>
                    <table class="demo-border">
                        <tbody>
                            <tr>
                                <td class="text" style="font: bold 20px/1.5 Arial, sans-serif;">{{ item.newsName }}
                                </td>
                            </tr>
                            <tr>
                                <td style="font-weight: lighter;"><strong>内容:&nbsp;</strong>{{ item.content }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <div v-show="userInfo.isAdmin === 1">
                        <el-button type="primary" style="float: right;" @click="newsDelete(item.id)">删除</el-button>
                        <br>
                    </div>
                </el-card>
                <br>
            </el-col>
        </el-row>

        <!-- 添加公告弹窗 -->
        <el-dialog v-model="dialogVisible" :title="newTitle" width="40%">
            <el-form label-width="25%" :model="newsModel">
                <el-form-item label="公告名称" prop="newsName">
                    <el-input v-model="newsModel.newsName" style="width: 90%;" placeholder="请输入公告名"></el-input>
                </el-form-item>
                <el-form-item label="公告内容" prop="content">
                    <el-input v-model="newsModel.content" style="width: 90%" :rows="4" type="textarea"
                        placeholder="请输入公告内容" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addNews"> 添加</el-button>
                </span>
            </template>
        </el-dialog>

    </div>

</template>
<style scoped>
.div {
    border-block: 1px;
}
</style>
